import React from 'react'
import {Link} from 'react-router'
import './orderItem.less'

export default class OrderItem extends React.Component{
    render(){
        let {item,index,type,btn1,btn1Click,btn2,btn2Click,_listIndex} = this.props;
        let list = [];
        let totalPrice = 0;
        item.productList.map((obj,i)=>{
            totalPrice += obj.productPrice*1;
            list.push(
                <li key={i}>
                    <label style={{backgroundImage: `url(${obj.productImage})`}}></label>
                </li>
            )
        });
        return(
            <div className="orderItem">
                <header>
                    <div>
                        <i className="iconfont icon-weidian"></i>
                        {item.merchantName}
                        <i className="iconfont icon-qianjin-copy"></i>
                    </div>
                    <span>{type}</span>
                </header>
                <section>
                    {item.productList.length === 1 ?
                        <Link to={`/my/detail?index=${index}&_listIndex=${_listIndex}`}>
                            <div>
                                <label style={{backgroundImage:`url(${item.productList[0].productImage})`}}></label>
                                <div>
                                    <p>{item.productList[0].productText}</p>
                                    <span>￥{item.productList[0].productPrice}</span>
                                </div>
                            </div>
                        </Link> :
                        <Link to={`/my/detail?index=${index}&_listIndex=${_listIndex}`}>
                            <ul style={{width:`${item.productList.length*104}px`}}>
                                {list}
                            </ul>
                        </Link>}
                </section>
                <footer>
                    <p>共{item.productList.length}件商品 合计：￥{totalPrice}.00</p>
                    {
                        btn1 || btn2 ? <div  className="btnGroup">
                            {btn1 ? <button onClick={btn1Click}>{btn1}</button> : null}
                            {btn2 ? <button className="active" onClick={btn2Click}>{btn2}</button> : ""}
                        </div> : null
                    }
                </footer>

            </div>
        )
    }
}